<!--
 * @Description: 
 * @Author: xuzp4
 * @Date: 2022-12-12 16:59:53
 * @LastEditors: xuzp4
 * @LastEditTime: 2022-12-15 11:25:37
 * @FilePath: \vue_demo\src\view\threejs\geometry.vue
-->
<template>
  <canvas class="webgl"></canvas>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
export default {
  mounted() {
    const cursor = {
      x: 0,
      y: 0,
    };
    // window.addEventListener("mousemove", (event) => {
    //   cursor.x = event.clientX / sizes.width - 0.5;
    //   cursor.y = -(event.clientY / sizes.height - 0.5);
    //   console.log(cursor.y);
    // });

    window.addEventListener('resize',() => {
      // update sizes
      sizes.width = window.innerWidth;
      sizes.height = window.innerHeight;
      // update camera
      camera.aspect = sizes.width/sizes.height;
      camera.updateProjectionMatrix()
      // update renderer
      renderer.setSize(sizes.width,sizes.height)
      renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))
    })
    window.addEventListener('dblclick',() => {
      const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement
      if(!fullscreenElement) {
        if(canvas.requestFullscreen) {
          canvas.requestFullscreen()
        } else if(canvas.webkitRequestFullscreen) {
          canvas.webkitRequestFullscreen()
        }
      } else {
        if( document.exitFullscreen) {
          document.exitFullscreen()
        } else if(document.webkitExitFullscreen) {
          document.webkitExitFullscreen()
        }
      }
    })
    const canvas = document.querySelector(".webgl");
    // Scene
    const scene = new THREE.Scene();

    const group = new THREE.Group();
    scene.add(group);
    const geometry =  new THREE.BufferGeometry()
    // const vertices = new Float32Array([0,0,0,0,1,0,1,0,0])
  
    // const vertices = []
    // for(let i =0;i<50;i++) {
    //   for(let j =0;j<3;j++) {
    //     vertices.push(Math.random(),Math.random(),Math.random())
    //   }
    // }
    // geometry.setAttribute('position',new THREE.Float32BufferAttribute(vertices,3))

    const count = 50;
    const psoitionArray = new Float32Array(count*3*3)
    for(let i =0;i<count*3*3;i++) {
      psoitionArray[i] = Math.random()
    }
    const positionAttribute = new THREE.BufferAttribute(psoitionArray,3)
    geometry.setAttribute('position',positionAttribute)


    
    const mesh =   new THREE.MeshBasicMaterial({ color: 0xff0000,wireframe:true })
    const cube1 = new THREE.Mesh(
      geometry,
      mesh
    );
    group.add(cube1);

    const sizes = {
      width: 800,
      height: 600,
    };
    // Camera
    const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);
    camera.position.z = 3;
    camera.lookAt(group.position);
    scene.add(camera);

    // constrols
    const controls = new OrbitControls(camera,canvas)
    // controls.enabled = false;
    controls.enableDamping = true;
    // Renderer
    const renderer = new THREE.WebGLRenderer({
      canvas,
    });
    renderer.setSize(sizes.width, sizes.height);
    renderer.render(scene, camera);

    // animation
    const tick = () => {
      controls.update()
      renderer.render(scene, camera);
      window.requestAnimationFrame(tick);
    };
    tick();
  },
};
</script>

<style>
* {
  margin:0;
  padding:0;
}
.webgl {
  position:fixed;
  top:0;
  left:0;
  outline:none;
}
</style>